
import React, { useCallback, useState, useContext, forwardRef } from 'react'
import CustomizeModal, { CustomizeModalButton, CustomizeModalContext } from "@common/presentational/CustomizeModal";
import { Input, Row, Col } from "antd";
import { updateUserInfo, getUserInfo} from '@sagas/user'
import {useDispatch, useSelector} from "react-redux";
const ChangeNameContent = props => {
    const { hide, params } = useContext(CustomizeModalContext)
    const { name: initName = '' } = params
    const [name, setName] = useState(initName)
    const dispatch = useDispatch()

    const handleNameChange = useCallback(e => {
        setName(e.currentTarget.value)
    }, [])

    const submitChangeName = () => {
        if(!name){
            return
        }
        dispatch(updateUserInfo({
            user_name: name
        },()=>{
            dispatch(getUserInfo())
            hide()
        }))
    }

    return (
        <>
            <Row className="modal-line">
                <Col span={20}>
                    <Input maxLength={24} value={name} onChange={handleNameChange} />
                </Col>
            </Row>
            <CustomizeModalButton
                onOk={submitChangeName}
                onCancel={hide}
            />
        </>
    )
}

export default forwardRef((props, ref) => (
    <CustomizeModal title="修改昵称" ref={ref} >
        <ChangeNameContent {...props} />
    </CustomizeModal>
))
